<template>
  <view class="personal-container">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar-placeholder"></view>

    <!-- 个人信息区域 -->
    <view class="profile-section">
      <image
        class="profile-bg"
        src="https://life-1330552791.cos.ap-guangzhou.myqcloud.com/index/Snipaste_2025-04-02_14-54-57.jpg"
        mode="aspectFill"
      ></image>
      <view class="profile-overlay"></view>
      <view class="profile-header">
        <image
          class="avatar"
          :src="
            userInfo.avatar ||
            'https://life-1330552791.cos.ap-guangzhou.myqcloud.com/index/Snipaste_2025-04-02_14-54-57.jpg'
          "
          mode="aspectFill"
        ></image>
        <view class="user-details">
          <view class="name-and-edit">
            <text class="nickname">{{ userInfo.nickname || "用户昵称" }}</text>
            <button class="edit-profile-btn" @click="editProfile">
              编辑资料
            </button>
          </view>
          <view class="user-info">
            <text class="info-item">{{
              userInfo.gender == "1" ? "男" : "女" || "未设置"
            }}</text>
            <text class="info-divider">|</text>
            <text class="info-item">{{ userInfo.location || "未设置" }}</text>
          </view>
          <text class="bio">{{
            userInfo.intro || "这个人很懒，什么都没有留下~"
          }}</text>
        </view>
      </view>
    </view>

    <!-- 内容标签页 -->
    <view class="content-tabs">
      <view
        class="tab-item"
        :class="{ active: activeTab === 'published' }"
        @click="switchTab('published')"
      >
        <text>发布</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'liked' }"
        @click="switchTab('liked')"
      >
        <text>喜欢</text>
      </view>
    </view>

    <!-- 文章列表 -->
    <scroll-view class="article-list" scroll-y>
      <!-- 发布的文章 -->
      <view v-if="activeTab === 'published'" class="articles-grid">
        <view
          v-for="(item, index) in myArticles"
          :key="index"
          class="article-card"
          @click="goToDetail(item)"
        >
          <image
            class="article-image"
            :src="getFirstImage(item.article_images)"
            mode="aspectFill"
            lazy-load
            loading="eager"
            @error="handleImageError"
          ></image>
          <view class="article-info">
            <text class="article-title">{{ item.article_title }}</text>
            <view class="article-stats">
              <text class="like-count">♡ {{ item.article_likes || 0 }}</text>
            </view>
          </view>
        </view>

        <!-- 无内容提示 -->
        <view v-if="myArticles.length === 0" class="empty-tip">
          <text>还没有发布内容哦~</text>
        </view>
      </view>

      <!-- 喜欢的文章 -->
      <view v-if="activeTab === 'liked'" class="articles-grid">
        <view
          v-for="(item, index) in likedArticles"
          :key="index"
          class="article-card"
          @click="goToDetail(item)"
        >
          <image
            class="article-image"
            :src="getFirstImage(item.article_images)"
            mode="aspectFill"
          ></image>
          <view class="article-info">
            <text class="article-title">{{ item.article_title }}</text>
            <view class="article-stats">
              <text class="like-count">♡ {{ item.article_likes || 0 }}</text>
            </view>
          </view>
        </view>

        <!-- 无内容提示 -->
        <view v-if="likedArticles.length === 0" class="empty-tip">
          <text>还没有喜欢的内容哦~</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <tab-bar></tab-bar>
  </view>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  import { getMyArticle, getMyLike } from "@/api/personal";

  import { getUserInfo } from "@/api/user";
  import TabBar from "@/components/tab-bar/tab-bar.vue";

  const userInfo = ref({});

  // 文章列表
  const myArticles = ref([]);
  const likedArticles = ref([]);

  // 当前选中的标签页
  const activeTab = ref("published");

  // 获取用户信息
  const getUserInfoData = async () => {
    try {
      const res = await getUserInfo();
      userInfo.value = res.data;
    } catch (error) {
      console.error("获取用户信息失败", error);
      uni.showToast({
        title: "获取用户信息失败",
        icon: "none",
      });
    }
  };

  // 获取用户发布的文章
  const getMyArticles = async () => {
    try {
      const res = await getMyArticle();
      console.log("res.data", res.data.data);

      myArticles.value = res.data.data;
    } catch (error) {
      console.error("获取文章列表失败", error);
    }
  };

  // 获取用户喜欢的文章
  const getLikedArticles = async () => {
    try {
      const res = await getMyLike({ page: 1, limit: 10 });
      likedArticles.value = res.data.data;
    } catch (error) {
      console.error("获取喜欢的文章失败", error);
      uni.showToast({
        title: "获取喜欢的文章失败",
        icon: "none",
      });
    }
  };

  // 切换标签页
  const switchTab = (tab) => {
    activeTab.value = tab;
  };

  // 编辑个人资料
  const editProfile = () => {
    uni.navigateTo({
      url: "/pages/personal/edit",
    });
  };

  // 获取文章第一张图片
  const getFirstImage = (imageStr) => {
    try {
      if (typeof imageStr === "string") {
        const imageArray = JSON.parse(imageStr);
        if (Array.isArray(imageArray) && imageArray.length > 0) {
          return imageArray[0];
        }
      }
      return "../../static/img/default.jpg"; // 默认图片
    } catch (error) {
      console.error("解析图片失败:", error);
      return "../../static/img/default.jpg"; // 解析失败时返回默认图片
    }
  };

  // 跳转到文章详情
  const goToDetail = (item) => {
    uni.navigateTo({
      url: `/pages/campus/detail?article_id=${item.article_id}`,
    });
  };

  onMounted(() => {
    getUserInfoData();
    getMyArticles();
    getLikedArticles();
  });
</script>

<style lang="scss" scoped>
  .personal-container {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .profile-section {
      position: relative;
      height: 500rpx;
      padding: 30rpx;
      border-radius: 0 0 30rpx 30rpx;
      margin-bottom: 20rpx;

      .profile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }

      .profile-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(6px);

        z-index: 0;
      }

      .profile-header {
        position: relative;
        z-index: 1;
        padding-top: 100rpx;
        display: flex;
        flex-direction: column;

        .avatar {
          width: 160rpx;
          height: 160rpx;
          border-radius: 50%;
          margin: 10rpx auto;
          border: 4rpx solid rgba(255, 255, 255, 0.8);
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        }

        .user-details {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 15rpx;

          .name-and-edit {
            display: flex;
            align-items: center;
            gap: 16rpx;
            margin-bottom: 16rpx;

            .nickname {
              font-size: 36rpx;
              font-weight: 600;
              color: #333;
            }

            .edit-profile-btn {
              height: 56rpx;
              line-height: 56rpx;
              font-size: 24rpx;
              color: #333;
              background-color: rgba(245, 245, 245, 0.8);
              border-radius: 28rpx;
              padding: 0 24rpx;
              border: 1rpx solid rgba(224, 224, 224, 0.8);
            }
          }

          .user-info {
            display: flex;
            align-items: center;
            gap: 20rpx;
            margin: 12rpx 0;

            .info-item {
              font-size: 26rpx;
              color: #333;
            }

            .info-divider {
              font-size: 24rpx;
              color: #333;
            }
          }

          .bio {
            font-size: 26rpx;
            color: #333;

            line-height: 1.4;
            text-align: center;
            margin-top: 12rpx;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .content-tabs {
      display: flex;
      background-color: #ffffff;
      padding: 0 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      margin-bottom: 10rpx;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.02);

      .tab-item {
        flex: 1;
        display: flex;
        justify-content: center;
        padding: 28rpx 0;
        font-size: 30rpx;
        color: #666;
        position: relative;
        transition: all 0.3s ease;

        &.active {
          color: #333;
          font-weight: 600;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 70rpx;
            height: 6rpx;
            background-color: #ff2442; /* 小红书红色 */
            border-radius: 3rpx;
          }
        }
      }
    }

    .article-list {
      flex: 1;
      padding: 24rpx 20rpx;

      .articles-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24rpx;
        padding-bottom: 120rpx; /* 为底部导航留出空间 */

        .article-card {
          background-color: #ffffff;
          border-radius: 16rpx;
          overflow: hidden;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
          transition: all 0.3s ease;

          .article-image {
            width: 100%;
            height: 360rpx;
            background-color: #f5f5f5;
            object-fit: cover;
          }

          .article-info {
            padding: 20rpx 16rpx;

            .article-title {
              font-size: 28rpx;
              color: #333;
              line-height: 1.4;
              margin-bottom: 16rpx;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: 500;
            }

            .article-stats {
              display: flex;
              align-items: center;

              .like-count {
                font-size: 24rpx;
                color: #999;
                display: flex;
                align-items: center;
              }
            }
          }

          &:active {
            transform: scale(0.97);
            transition: transform 0.2s;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
          }
        }

        .empty-tip {
          grid-column: span 2;
          text-align: center;
          padding: 120rpx 0;
          color: #999;
          font-size: 28rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          &::before {
            content: "";
            width: 120rpx;
            height: 120rpx;
            background-color: #f5f5f5;
            border-radius: 50%;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.6;
          }
        }
      }
    }
  }
</style>
